/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import { SendGiftO, HomeO, MoreO, UserO } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';

const Tabbar = () => {

    const location = useLocation()

    const navigate = useNavigate();


    const [tabName, settabName] = React.useState('home')

    React.useEffect(() =>{
        settabName(location.pathname)
    }, [])

    const OnTabbarChange = (val) => {
        settabName(val)
        navigate(val)
    }

    return (
        <div className="tabbar">
            <React.$Vant.Tabbar activeColor="#f44336" value={tabName} onChange={OnTabbarChange}>
                <React.$Vant.Tabbar.Item name='/' icon={<HomeO />}>
                    首页
                </React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item name='/business/consult/index' icon={<MoreO />}>
                    咨询
                </React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item name='/business/category/index' icon={<SendGiftO />}>
                    学术
                </React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item name='/business/base/business' icon={<UserO />}>
                    我的
                </React.$Vant.Tabbar.Item>
            </React.$Vant.Tabbar>
        </div>
    )
}

export default Tabbar;